<template>
  <div class="home">
    <div class="nav">
      <el-image style="width: 38px;height: 37px;" :src="require('@/assets/images/canteenIcon.png')" />
      <div class="title">饭堂管理/退款管理</div>
    </div>
    <div class="contentBox">
      <!-- 搜索、选择 -->
      <div class="sousuo">
        <el-form ref="queryForm" :model="queryParams" style="display: flex;flex-wrap: wrap;" label-width="80px">
          <el-form-item label="学校名称" prop="schoolId">
            <el-select v-model="queryParams.schoolId" placeholder="请选择学校" clearable>
              <el-option v-for="(item, index) in schoolList" :key="item.id" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="classId">
            <el-select v-model="queryParams.classId" placeholder="请选择班级" clearable>
              <el-option v-for="item in classList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="审核状态" prop="payoutStatus">
            <el-select v-model="queryParams.payoutStatus" placeholder="请选择审核状态" clearable>
              <el-option label="待审核" :value=0></el-option>
              <el-option label="审核通过" :value=1></el-option>
              <el-option label="审核拒绝" :value=2></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="退费状态" prop="payoutStatus">
            <el-select v-model="queryParams.payoutStatus" placeholder="请选择退费状态" clearable>
              <el-option label="待退费" :value=0></el-option>
              <el-option label="已退费" :value=1></el-option>
              <el-option label="拒绝退费" :value=2></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" prop="datavalue">
            <div class="date">
              <el-date-picker v-model="queryParams.datavalue" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="selectDate">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;">
              <div class="btn1"><el-button type="primary" @click="handleQuery">查询</el-button></div>
              <div class="btn2"><el-button type="primary"  @click="resetQuery">重置</el-button></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 退款情况 -->
      <div class="crderingmeals">
        <div class="mealsNumber">
          <div class="div">退餐人数: <span>{{ refundPeopleNumber.totalNum }}</span> 人</div>
          <!-- <div class="div">早餐: <span>{{ refundPeopleNumber.breakfastNum }}</span> 人</div>
          <div>午餐: <span>{{ refundPeopleNumber.lunchNum }}</span> 人</div> -->
        </div>
        <div class="btnbox" style="justify-content: flex-end;" >
          <div class="btn">
            <el-image style="width: 27px;height: 23px;margin-right: 10px;"
              :src="require('@/assets/images/daoruIcon.png')"></el-image>
            <el-button type="warning" round @click="handleExport">导出</el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table v-loading="loading" border :data="refundList" :max-height="700" stripe>
          <el-table-column :resizable="false" type="index" align="center" label="序号" />
          <el-table-column :resizable="false" label="申请时间" align="center" prop="createdAt" width="100" />
          <el-table-column :resizable="false" label="学校名称" align="center" prop="schoolName" />
          <el-table-column :resizable="false" label="年级" align="center" prop="gradeName" />
          <el-table-column :resizable="false" label="班级" align="center" prop="className" />
          <el-table-column :resizable="false" label="学生姓名" align="center" prop="studentName" />
          <el-table-column :resizable="false" label="家长手机号" align="center" prop="parentMobile" width="120"/>
          <el-table-column :resizable="false" label="退餐情况" align="center" prop="refundReason" width="110" />
          <el-table-column :resizable="false" label="退餐时间" align="center" prop="refundDate" width="160" />
          <el-table-column :resizable="false" label="退餐账号" align="center" prop="refundAccount" />
          <el-table-column :resizable="false" label="退餐金额(元)" align="center" prop="refundAmount" />
          <el-table-column :resizable="false" label="审核状态" align="center" prop="payoutStatus" >
            <template slot-scope="scope">
              <div v-if=" scope.row.payoutStatus==2" style="color: #0000C1;">待审核</div>
              <div v-else-if=" scope.row.payoutStatus==1" style="color: #1BC100;">审核通过</div>
              <div v-else=" scope.row.payoutStatus==0" style="color: #FF0000;">审核拒绝</div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="更新日期" align="center" prop="updatedAt" width="100" />
          <el-table-column :resizable="false" label="退餐状态" align="center" prop="payoutStatus" >
          <template slot-scope="scope">
              <div v-if=" scope.row.payoutStatus==2" style="color: #0000C1;">待退费</div>
              <div v-else-if=" scope.row.payoutStatus==1" style="color: #1BC100;">已退费</div>
              <div v-else=" scope.row.payoutStatus==0" style="color: #FF0000;">拒绝退费</div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="btn" @click="refundDrawer(scope.row)" type="text">详情</el-button>
              <!-- <el-button style="color: #000;" type="text">备注</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getListData" />
      </div>
    </div>
    <!-- drawer -->
    <el-drawer title="详情" :visible.sync="drawer" direction="rtl" size="732px">
      <div class="drawercontent"  v-loading="drawerloading">
        <div class="line"></div>
        <div class="item" v-for="(item, index) in drawerData" :key="index">
          <span class="title">{{ item.title }} <div class="line"></div></span>
          <div style="margin-top: 10px;">
            <el-descriptions v-for="(item1, index1) in item.list" :key="index1" :border="true" :column="1"
              :labelStyle="{width:'130px',textAlign: 'center',color:'#000'}" :contentStyle="{color:'#000'}">
              <el-descriptions-item :label="item1.lable" >
                 <div v-if="item1.name=='不同意'" style="color: #FF0000;"> {{ item1.name }}</div>
                 <div v-else-if="item1.name=='待审批'" style="color: #0000C1;"> {{ item1.name }}</div>
                 <div v-else-if="item1.name=='同意'" style="color: #1BC100;"> {{ item1.name }}</div>
                 <div v-else> {{ item1.name }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getschool } from "@/api/gradeSystem/grade";
import { listClasses} from "@/api/classSystem/class";
import { refundList, refundDetails, refundPeopleNumber } from "@/api/canteenSystem/refundManagement.js"
export default {
  data () {
    return {
      drawer: false,
      // 遮罩层
      loading: true,
      drawerloading:true,
      // 搜索数据
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        schoolId: null,
        classId: null,
        payoutStatus:null,
        studentName: null,
        datavalue:null,
        startDate:null,
        endDate:null,
      },
      //学校列表
      schoolList: [],
      //班级列表
      classList: [],
      //总条数
      total: 0,
      //退费数据表
      refundList: [],
      //详情
      drawerData: [],
      //退餐人数
      refundPeopleNumber:{},
    }
  },
  created () {
    this.getschoolList()
    this.getListData()
    this.getclassList()
  },
  methods: {
    // 查询学校
    async getschoolList () {
      let res = await getschool()
      this.schoolList = res
    },
    /**班级列表**/
    getclassList () {
      let queryParams = {}
      listClasses().then(response => {
        this.classList = response.rows;
      });
    },
    //搜索按钮
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getListData()
    },
    //日期
    selectDate (e) {
      if(e){
        this.queryParams.startDate = e[0]
        this.queryParams.endDate = e[1]
      }
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams.startDate=null,
      this.queryParams.endDate=null,
      this.queryParams.datavalue=null
      this.handleQuery();
    },
    handleExport() {
      //const queryParams = this.queryParams;
      this.download('wsdRefundTransactions/exportRefundManagement', {
        ...this.queryParams
      }, `退餐管理_${new Date().getUTCFullYear()}${new Date().getUTCMonth()}${new Date().getUTCDate()}${new Date().getHours()}${new Date().getMinutes()}.xlsx`)
    },
     // 获取列表数据
     async getListData () {
      this.loading = true
      let res = await  refundList(this.queryParams)
      this.refundList=res.rows
      this.total=res.total
      let res1=await refundPeopleNumber(this.queryParams)
      this.refundPeopleNumber=res1.data
      console.log("================================>",res1);
      this.loading = false
    },
    // 打开退款详情
    async refundDrawer(data){
      this.drawer=true
      this.drawerloading=true
      let res = await refundDetails(data.id)
      this.drawerData=res.data
      this.drawerloading=false

    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  padding: 10px;
  box-sizing: border-box;
  background-color: #eee;
  overflow: auto;
}

.nav {
  // width: 1636px;
  width: 98%;
  display: flex;
  align-items: center;
  margin: 10px auto;
  padding-left: 20px;
  box-sizing: border-box;

  .title {
    margin-left: 10px;
    font-weight: bold;
  }
}

.contentBox {
  // width: 1636px;
  width: 98%;
  height: 881px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  background-image: url('../../../assets/images/canteenBJ.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .sousuo {
    ::v-deep .el-input--medium .el-input__inner {
      width: 170px;
    }
    .date{
      ::v-deep .el-range-editor--medium.el-input__inner {
        width: 243px;
      }
  }

    .btn1 {
      ::v-deep .el-button--medium {
        background-image: linear-gradient(to right, #DE0D0F, #F27605);
      }
    }

    .btn2 {
      ::v-deep .el-button--medium {
        background-color: #F5F5F5;
        color: #999999;
        border: 1px solid #999999;
        margin-left: 10px;
      }
    }

  }

  .crderingmeals {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mealsNumber {
      display: flex;
      justify-content: space-between;
      .div{
        margin-right: 20px;
      }
    }

    .btnbox {
      width: 20%;
      display: flex;
      justify-content: space-between;

      .btn {
        display: flex;
        align-items: center;

        ::v-deep .el-button--medium {
          background-color: #F47D04;
          padding: 5px 10px;
        }
      }
    }
  }

  .tableBox {
    margin-top: 10px;

    .btn {
      color: #fff;
      background-color: #F47D04;
      padding: 5px 10px;
      border-radius: 20px;
    }
  }
}

// drawer
.drawercontent {
  padding: 0 20px 20px;
  box-sizing: border-box;

  .line {
    border: 1px solid #ECECEC;
    width: 100%;
  }

  .item {
    margin-top: 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      z-index: 0;

      .line {
        position: absolute;
        top: 12px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 8px;
        border-radius: 5px;
        background-color: #FFCE80;
      }
    }
  }
}
</style>
